<!DOCTYPE html>
<html class="personal">
<head>
    <title>个人版</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/style-index.css">
</head>
<body>

<div class="letter-page">
    <div class="main_bg">
        <img src="../img/index_bg1@2x.png" alt="">
    </div>

    <div class="letterbox-container">
        <div class="letter-box">
            <img class="evn-people" src="../img/index_people@2x.png" alt="">
            <div class="logo">
                <!--<img class="light move" src="../img/letterbox/letter_logo_light.png">-->
            </div>
            <div class="gai">
                <img class="img-gai" src="../img/letterbox/letter_gai@2x.png">

                <div class="name">
                    <h4>点击信封开启账单</h4>
                    <h3><img src="../img/letterbox/letter_name_img@2x.png" alt="">狮子先生<img src="../img/letterbox/letter_name_img@2x.png" alt=""></h3>
                </div>
            </div>
            <div class="mian"><img src="../img/letterbox/letter_mian@2x.png"></div>
            <div class="xinzhi"></div>
        </div>
    </div>

    <!--<div class="main-env">-->
    <!--<img src="../img/main_people@2x.png" alt="">-->
    <!--<div class="txt1">点击信封开启账单</div>-->
    <!--<div class="txt2">二愣子</div>-->
    <!--</div>-->
</div>

<div class="bg-left-line"></div>
<div class="bg-right-line"></div>
<div style="display: none">
    <img data-src="../img/pic_pop_phone_over_top.png">
    <img data-src="../img/pic_pop_rule_top.png">
    <img data-src="../img/pic_pop_share_success_top.png">
</div>
<!-- 滑屏示意图片 -->
<img src="../img/swiper-icon.png"
     class="arrow-slidedown-nav" alt="">
<div id="wrapper" class="wrapper">
    <!-- fullpage -->
    <div id="fullpage">
        <!--第1屏 - 收益额-->
        <div class="section section1" data-title-txt="收益额">
            <div class="section__content gain" style="display: none">
                <div class="section__content-top">
                    <div class="section__content-top-txt">
                        <img class="light_left" data-src="../img/light_left@2x.png" alt="">
                        <img class="light_right" data-src="../img/light_right@2x.png" alt="">
                        <h2>收益额</h2>
                    </div>
                    <div class="section__content-top-income"><span class="unit">￥</span>20000</div>
                </div>
                <div class="section__content-bottom">
                    <div class="section__content-bottom-chartbox">
                        <div id="income-chart"></div>
                        <div class="section__content-bottom-txt">
                            <p>10月能量爆棚，关注公众号，hold住好状态！</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section__content deficit" style="display:none;">
                <div class="section__content-top">
                    <div class="section__content-top-txt">
                        <img class="light_left" data-src="../img/light_left@2x.png" alt="">
                        <img class="light_right" data-src="../img/light_right@2x.png" alt="">
                        <h2>收益额</h2>
                        <div class="section__content-top-income">-20000</div>
                    </div>
                </div>
                <div class="section__content-bottom">
                    <div class="section__content-bottom-chartbox">
                        <div id="deficit-chart"></div>
                        <div class="section__content-bottom-txt">
                            <p>10月能量爆棚，hold住好状态！</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--第2屏 - 收益率-->
        <div class="section section2" data-title-txt="收益率">
            <div class="section__content">
                <div class="section__content-top">
                    <div class="section__content-top-txt">
                        <img class="light_left" data-src="../img/light_left@2x.png" alt="">
                        <img class="light_right" data-src="../img/light_right@2x.png" alt="">
                        <h2>收益率</h2>
                    </div>
                    <div class="section__content-top-rate-box">
                        <div class="section__content-top-rate">13<span>%</span></div>
                    </div>
                </div>
                <div class="section__content-center">
                    <div class="short_line_div">
                        <span class="short_line1"></span>
                        <span class="chart-title">收益率</span>
                        <span class="short_line2"></span>
                    </div>
                    <div class="chart_info_div">
                        <span class="chart_info">
                            <img data-src="../img/section5_chart_info1.png" alt=""/>
                            <span class="info_text">我</span>
                        </span>
                        <span class="chart_info">
                            <img data-src="../img/section5_chart_info2.png" alt=""/>
                            <span class="info_text">泸深300</span>
                        </span>

                    </div>
                    <div id="chart"></div>
                </div>

            </div>
        </div>

        <!--第3屏 - 个股与现金管家-->
        <div class="section section3" data-title-txt="个股与现金管家">
            <div class="section__content-top">
                <div class="section__content-top-txt">
                    <img class="light_left" data-src="../img/light_left@2x.png" alt="">
                    <img class="light_right" data-src="../img/light_right@2x.png" alt="">
                    <h2>印象最深的股票</h2>
                </div>
            </div>
            <div class="content-wrapper type3">
                <div class="info-box">
                    <div class="box box-type1 ">
                        <div class="zhang">
                            <p>最赚钱的股票</p>
                            <img data-src="../img/sec3_zhang@2x.png">

                            <h3>华润三九</h3>

                            <h4>+3456元</h4>
                        </div>
                    </div>
                    <div class="box box-type2">
                        <div class="die">
                            <p>最伤心的股票</p>
                            <img data-src="../img/sec3_die@2x.png">

                            <h3>同花顺</h3>

                            <h4>-3456元</h4>
                        </div>
                    </div>
                    <div class="box box-type3">
                        <div class="zhang">
                            <div class="bg">
                                <p>最赚钱的股票</p>
                                <img data-src="../img/sec3_zhang@2x.png">

                                <h3>华润三九</h3>

                                <h4>+3456元</h4>
                            </div>
                        </div>
                        <div class="die">
                            <div class="bg">
                                <p>最伤心的股票</p>
                                <img data-src="../img/sec3_die@2x.png">
                                <h3>同花顺</h3>
                                <h4>-3456元</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-box">

                    <div class="detail-box ">
                        <div class="type1">

                            <div class="line"></div>
                            <span>二季度涨幅最大的股票</span>
                            <h4>某某股份</h4>
                            <!--<h5>000423</h5>-->

                        </div>
                        <div class="type2">

                        </div>
                    </div>
                    <div class="ad ad1 active">
                        <div class="txt">
                            <img data-src="../img/sec3_gold@2x.png">
                            <h4>开通现金管家，二季度将额外 <br>为我赚 <span>2248</span> 元</h4>
                        </div>
                        <a href="javascript;">开通</a>
                    </div>
                    <div class="ad ad2 ">
                        <div class="txt">
                            <img data-src="../img/sec3_gold@2x.png">
                            <h4>弹无虚发、技术过人</h4>
                        </div>
                    </div>
                    <div class="ad ad3 ">

                        <div class="txt">
                            <img data-src="../img/sec3_gold@2x.png">
                            <h4>胜败乃兵家常事</h4>
                        </div>
                    </div>
                    <div class="ad ad4 ">
                        <div class="txt">
                            <img data-src="../img/sec3_gold@2x.png">
                            <h4>股海沉浮、笑看风云</h4>
                        </div>
                    </div>
                    <div class="ad ad5 ">
                        <div class="txt">
                            <img data-src="../img/sec3_gold@2x.png">
                            <h4>您已开通现金管家 <br>时刻为您增值</h4>
                        </div>
                        <div class="txt2">
                            <img src="../img/sec3_txt.png">
                        </div>
                    </div>
                    <div class="ad ad6 ">
                        <div class="txt">
                            <img data-src="../img/sec3_gold@2x.png">
                            <h4>现金管家开通中 <br>贴心服务即将开启</h4>
                        </div>
                        <div class="txt2">
                            <img src="../img/sec3_txt.png">
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!--第4屏 - 仓位控制-->
        <div class="section section4" data-title-txt="仓位控制">
            <div class="section__content">
                <div class="section__content-top">
                    <div class="section__content-top-txt">
                        <img class="light_left" data-src="../img/light_left@2x.png" alt="">
                        <img class="light_right" data-src="../img/light_right@2x.png" alt="">
                        <h2>仓位控制</h2>
                    </div>
                </div>
                <table class="section__content-center">
                    <div class="chart_title">
                        <span class="chart_title_left">股票仓位(%)</span>
                        <span class="chart_title_right">泸深300指数</span>
                    </div>
                    <div id="chart2"></div>
                    <div class="chart_info_div">
                        <span class="chart_info">
                            <span class="info_text">股票仓位(%)</span>
                            <img data-src="../img/section7_chart_info1.png" alt=""/>
                        </span>
                        <span class="chart_info">
                            <span class="info_text">达人仓位(%)</span>
                            <img data-src="../img/section7_chart_info2.png" alt=""/>
                        </span>
                        <span class="chart_info">
                            <span class="info_text">泸深300指数</span>
                            <img data-src="../img/section7_chart_info3.png" alt=""/>
                        </span>
                    </div>
                </table>
                <div class="section__content-bottom">
                    <img data-src="../img/bottom_section7.png" alt="" class="section__content-bottom-img"/>
                    <img data-src="../img/bottom_section7_2.png" alt="" class="section__content-bottom-img-2"/>
                    <!--<div class="section__content-bottom-left"></div>
                    <div class="section__content-bottom-right">
                        <p class="section__content-bottom-right-txt_big">达人控仓 <span>666</span></p>
                        <p class="section__content-bottom-right-txt">快来微理财小君课堂涨姿势</p>
                    </div>
                    <div style="clear: both;"></div>-->
                </div>
            </div>
        </div>

        <!--第5屏 - 资金情况-->
        <div class="section section5" data-title-txt="资金情况">
            <div class="section__content">
                <div class="section__content-top">
                    <div class="section__content-top-txt">
                        <img class="light_left" data-src="../img/light_left@2x.png" alt="">
                        <img class="light_right" data-src="../img/light_right@2x.png" alt="">
                        <h2>资金情况</h2>
                    </div>
                </div>
                <div class="section__content-bottom">
                    <div class="annual_account">
                        <img data-src="../img/sec5_bg@2x.png" alt="">
                        <div class="account_container">
                            <img data-src="../img/sec5_bg_center@2x.png" alt="">
                            <div class="text_container">
                                <div class="text_title">年末资金</div>
                                <div class="text_num">10000</div>
                            </div>
                        </div>
                    </div>
                    <div class="account-text_container">
                        <div class="row">
                            <div class="label">年初资产</div>
                            <div class="text">20000</div>
                            <div class="label">账户盈亏</div>
                            <div class="text">20000</div>
                        </div>
                        <div class="row">
                            <div class="label">转入金额</div>
                            <div class="text">10000</div>
                            <div class="label">转出金额</div>
                            <div class="text">10000</div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!--第6屏 - 综合能力-->
        <div class="section section6" data-title-txt="综合能力">
            <div class="section__content">
                <div class="sec3__content-box">
                    <div class="section__content-top">
                        <div class="section__content-top-txt">
                            <img class="light_left" data-src="../img/light_left@2x.png" alt="">
                            <img class="light_right" data-src="../img/light_right@2x.png" alt="">
                            <h2>综合实力</h2>
                        </div>
                        <div class="sec3__text-box">
                            <div class="upper-bg"></div>
                            <img class="upper_bg-img" data-src="../img/4_upper_bg@2x.png" alt="">
                            <div class="section__content-star">
                                <img class="section__content-star-img" data-src="../img/4_upper_star1@2x.png" alt="">
                                <div class="section__content-star-text">点石成金</div>
                                <div class="text2">
                                    我的<span class="section__content-star-text1">收益能力</span>打败 <span class="section__content-star-text2">54%</span> 的投资者
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section__content-bottom">
                        <div class="radar-map">
                            <div class="chart1"></div>
                            <div class="chart_info_div">
                                <span class="chart_info">
                                    <img data-src="../img/section6_chart_info1.png" alt=""/>
                                    <span class="info_text1">2015</span>
                                </span>
                                <span class="chart_info">
                                    <img data-src="../img/section6_chart_info2.png" alt=""/>
                                    <span class="info_text2">2016</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--第10屏 - 奖励及领取-->
        <div class="section section10" data-title-txt="奖励及领取">
            <div class="section__content">
                <div class="section__content-top">
                    <img data-src="../img/sec7_title_bg.png" alt="" class="section__content-top-bg">
                    <img data-src="../img/sec7_title.png" alt="" class="section__content-top-title"/>
                    <img data-src="../img/sec7_content_info.png" alt="" class="section__content-info"/>
                </div>
                <div class="section__content-bottom">
                    <div class="section__content-bottom-item">
                        <img data-src="../img/sec7_type1.png" alt="" class="sec7_type_img"/>
                        <div class="sec7_type_name">民工君</div>
                        <div>粉丝204350</div>
                        <div>收益率70%</div>
                    </div>
                    <div class="section__content-bottom-item">
                        <img data-src="../img/sec7_type2.png" alt="" class="sec7_type_img"/>
                        <div class="sec7_type_name">梭罗神</div>
                        <div>粉丝204350</div>
                        <div>收益率70%</div>
                    </div>
                    <div class="section__content-bottom-item">
                        <img data-src="../img/sec7_type3.png" alt="" class="sec7_type_img"/>
                        <div class="sec7_type_name">听风吧</div>
                        <div>粉丝204350</div>
                        <div>收益率70%</div>
                    </div>
                    <div class="section__content-bottom-btn">
                        <a href="#">
                            <img data-src="../img/sec7_btn_share.png" alt=""/>
                        </a>
                        <a href="javascript:;" id="btn_get" data-popup="popup1">
                            <img data-src="../img/sec7_btn_get.png" alt=""/>
                        </a>
                    </div>
                    <p class="section__content-bottom_big">分享内容不涉及个人账户信息哦</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- popup -->
<div id="popup">
    <div class="mask-content" id="popup1">
        <div class="close-icon" data-popup="popup1">×</div>
        <img data-src="../img/sec7_mask_bg1.png" alt="" class="sec7_mask-top"/>
        <div class="sec7_mask-content">
            <img data-src="../img/sec7_get_result1.png" alt="" class="sec7_get_result"/>
            <a href="javascript:;" class="sec7_mask_btn">
            <img data-src="../img/sec7_mask_btn_bg.png" alt="" class="sec7_mask_btn_bg"/>
            <div class="sec7_mask_btn_text">确定</div>
        </a>
        <div class="sec7_mask_rule">奖励规则 <img data-src="../img/sec7_mask_rule_show.png" alt="" class="sec7_mask_rule_show rotate-90"/></div>
            <ul class="sec7_mask_rule_list">
                <li><span class="li-number">1</span><span class="li-content">话费将在1月25日活动结束后一周内充值至app注册手机，节假日顺延</span></li>
                <li><span class="li-number">2</span><span class="li-content">单个客户限领1次，总量有限</span></li>
                <li><span class="li-number">3</span><span class="li-content">本公司保留对活动的最终解释权</span></li>
            </ul>
        </div>
        <img data-src="../img/sec7_mask_bg2.png" alt="" class="sec7_mask-bottom"/>
    </div>
    <div class="mask-content" id="popup2">
        <div class="close-icon" data-popup="popup2">×</div>
        <img data-src="../img/sec7_mask_bg1.png" alt="" class="sec7_mask-top"/>
        <div class="sec7_mask-content">
            <img data-src="../img/sec7_get_result2.png" alt="" class="sec7_get_result"/>
            <a href="javascript:;" class="sec7_mask_btn">
                <img data-src="../img/sec7_mask_btn_bg.png" alt="" class="sec7_mask_btn_bg"/>
                <div class="sec7_mask_btn_text">确定</div>
            </a>
            <div class="sec7_mask_rule">奖励规则 <img data-src="../img/sec7_mask_rule_show.png" alt="" class="sec7_mask_rule_show rotate-90"/></div>
            <ul class="sec7_mask_rule_list">
                <li><span class="li-number">1</span><span class="li-content">话费将在1月25日活动结束后一周内充值至app注册手机，节假日顺延</span></li>
                <li><span class="li-number">2</span><span class="li-content">单个客户限领1次，总量有限</span></li>
                <li><span class="li-number">3</span><span class="li-content">本公司保留对活动的最终解释权</span></li>
            </ul>
        </div>
        <img data-src="../img/sec7_mask_bg2.png" alt="" class="sec7_mask-bottom"/>
    </div>
    <div class="mask-content" id="popup3">
        <div class="close-icon" data-popup="popup3">×</div>
        <img data-src="../img/sec7_mask_bg1.png" alt="" class="sec7_mask-top"/>
        <div class="sec7_mask-content">
            <img data-src="../img/sec7_get_result3.png" alt="" class="sec7_get_result"/>
            <a href="javascript:;" class="sec7_mask_btn">
                <img data-src="../img/sec7_mask_btn_bg.png" alt="" class="sec7_mask_btn_bg"/>
                <div class="sec7_mask_btn_text">确定</div>
            </a>
            <div class="sec7_mask_rule">奖励规则 <img data-src="../img/sec7_mask_rule_show.png" alt="" class="sec7_mask_rule_show rotate-90"/></div>
            <ul class="sec7_mask_rule_list">
                <li><span class="li-number">1</span><span class="li-content">话费将在1月25日活动结束后一周内充值至app注册手机，节假日顺延</span></li>
                <li><span class="li-number">2</span><span class="li-content">单个客户限领1次，总量有限</span></li>
                <li><span class="li-number">3</span><span class="li-content">本公司保留对活动的最终解释权</span></li>
            </ul>
        </div>
        <img data-src="../img/sec7_mask_bg2.png" alt="" class="sec7_mask-bottom"/>
    </div>

</div>


<!--分享成功 - 分享赚话费 - popup-->
<div id="share-earn-money-success-popup" class="popup">
    <div class="popup__top-people"></div>
    <div class="popup__content">
        <p class="popup__content-txt">领奖手机号 <span class="popup__content-txt_highlight">13918305461</span></p>
        <div class="popup__content-btn-box">
            <a href="#attention-public-number-popup" class="btn-bg-border-short"
               id="share-earn-money-success-get-reward">领取奖励</a>
        </div>
        <a href="javascript:;" class="popup__close">×</a>
    </div>
</div>

<!--话费发完了 - 分享赚话费 - popup-->
<div id="share-phone-over-popup" class="popup">
    <div class="popup__top-people"></div>
    <div class="popup__content">
        <p class="popup__content-txt">专业课程火热预售中</p>
        <div class="popup__content-btn-box">
            <a href="#attention-public-number-popup" class="btn-bg-border-short"
               id="share-phone-over-get-course">领取课程</a>
        </div>
        <a href="javascript:;" class="popup__close">×</a>
    </div>
</div>

<!--关注公众号 - popup-->
<div id="attention-public-number-popup" class="popup">
    <div class="popup__content">
        <p class="popup__content-title">已复制国泰君安微理财公众号，<br/>穿越到微信直接粘贴搜索。</p>
        <img data-src="../img/pc_pop_copy.jpg" alt=""
             class="popup__content-img">
    </div>
</div>

<!--底部信封图片-->
<div class="common-bottom-img">
    <img src="../img/letterbox/letter-box.png" alt=""/>
</div>

<!--第9屏 - 公众号亮点 - 微理财 -分享好友popup-->
<div id="section__content-bottom-wlc-popup">
    <p>
        点击马上分享
        <img src=''/>
    </p>
</div>

<div class="landscape-pop">
    <div>竖屏查看，效果更佳哦！</div>
</div>

<!-- build:js ../js/site.js -->
<script type="text/javascript" src="../js/vendor/zepto.js"></script>
<script type="text/javascript" src="../js/vendor/touch.js"></script>
<script type="text/javascript" src="../js/vendor/PageSlider.js"></script>
<script type="text/javascript" src="../js/vendor/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/vendor/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="../js/page.js"></script>
<script type="text/javascript" src="../js/vendor/highcharts.js"></script>
<script type="text/javascript" src="../js/vendor/highcharts-more.js"></script>
<script type="text/javascript" src="../js/vendor/exporting.js"></script>
<!-- endbuild -->
</body>
</html>
